<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>身份验证</title>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/jquery-weui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/weui.css">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/example.css">
    <script src="/static/admin/css/jquery-3.0.0.min.js"></script>
    <script src="/static/admin/layer/layer.js"></script>
    <style>
        .out {

            width: 96%;
            margin: 50px auto;
        }
        .out h2{
            padding: 4px .2em;
            color:#225fba;
            text-align: center;
        }
        .out h2 img{
            vertical-align:-1px;
            margin-left: 5px;
            width:22px;
        }

        .getvode {
            vertical-align: middle;

        }

        .tip {
            /*background:;*/
            position: absolute;
            top: 10px;
            right: 5px;
            color: #E64340;
            font-weight: bold;
        }
        .sure{
            margin-top:25px;
        }

        #btn{
            position: relative;
            top:-23px;
        }
    </style>
    <script>
        document.addEventListener('WeixinJSBridgeReady',
                function onBridgeReady(){
                    WeixinJSBridge.call('hideOptionMenu');
                });
        function abc(){
            WeixinJSBridge.call('closeWindow');
        }
    </script>
</head>
<body>
<div class="out">
    <h2>手机号码绑定</h2>
    <form action="{:url('bind_tel')}" method="post">
        <div class="weui_cells" style="margin-top:40px">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" name="tel" pattern="[0-9]*" value="" placeholder="输入您的手机号码" id="phone" />
                    <div id="telphone_tip" class="tip telphone_tip"></div>
                </div>
            </div>
        </div>
        <div class="weui_cells">
            <div class="weui_cell" >
                <div class="weui_cell_bd weui_cell_primary" style="height:28px">
                    <input class="weui_input" type="number" name="code" placeholder="请输入验证码" style="float: left;"/>
                    <input type="button" class="weui_btn weui_btn_mini weui_btn_primary getvode" style="float: right;" id="btn" value=" 获取验证码" >
                </div>
            </div>
        </div>
        <div class="sure">
            <button id="verify" class="weui_btn weui_btn_primary" >确认</button>
        </div>
    </form>

</div>
<script type="application/javascript">
    telRuleCheck2 = function (string) {
        var pattern = /^1[34578]\d{9}$/;
        if (pattern.test(string)) {
            return true;
        }else{
            //console.log('check mobile phone ' + string + ' failed.');
            return false;
        }
    };
    $("#phone").blur("blur", function () {
        var phone = $("#phone").val();
        if (phone == "") {
            document.getElementById("btn").disabled = true;
        } else {
            if (telRuleCheck2(phone)) {
                $("#telphone_tip").html("<i  class='weui_icon_success'></i>");
                document.getElementById("btn").disabled = false;
            } else {
                $("#telphone_tip").html("<i class='weui_icon_warn'></i>" + "格式不正确");
                document.getElementById("btn").disabled = true;
            }
        }
    });
    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function () {
                        time(o)
                    }, 1000
            )
        }
    }


    //获取验证码
    document.getElementById("btn").onclick = function () {
        var tel = $('#phone').val();
        if($.trim(tel) == ''){
            layer.alert('请输入手机号码');
            return false;
        }
        //判断手机号有无绑定
        var type = true;
        $.ajax({
            url : "{:url('verify_tel')}",
            type : 'post',
            data :{tel:tel},
            async : false,
            success : function (e) {
                if(e.code == 1){
                    type = false;
                }
            }
        });
        if(!type){
            layer.alert('该手机号码已经绑定');
        }else{
            //倒计时
            time(this);

            //获取短信验证码
            $.ajax({
                url : "{:url('get_code')}",
                data : {tel:tel},
                async : false,
                type : 'post',
                success: function(e){
                    if(e.code == 0){
                        layer.msg('成功获取验证码');
                        $('#phone').attr('readonly','readonly');
                    }else{
                        layer.alert(e.msg);
                    }
                }
            });
        };
    }



    //提交
    $('#verify').click(function () {
        var tel = $('input[name=tel]').val();
        tel = $.trim(tel);
        var code = $('input[name=code]').val();
        code = $.trim(code);
        if(!tel){
            layer.alert('手机号码不能为空');
            return false;
        }
        if(!code){
            layer.alert('验证码不能为空');
            return false;
        }
        //验证短信验证码
        var type = true;
        $.ajax({
            url : "{:url('verify_code')}",
            data : {tel:tel,code:code},
            async : false,
            type : 'post',
            success: function(e){
                if(e.code == 1){
                    type = false;
                }
            }
        });
        if(!type){
            layer.alert('验证码不正确');
            return false;
        }else{
            $('form').submit();
        }
    });
</script>
</body>
</html>